<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/bian_wz.css" />
	<!--<script src="js/bian_wz.js"></script>-->
	<link rel="stylesheet" type="text/css" href="css/bian_wz_xz.css" />
	<link rel="stylesheet" href="css/foundation-datepicker.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/base.js"></script>
	<script src="js/paging.js"></script>
	<script src="js/wangEditor.js"></script>
	<link rel="stylesheet" href="css/input_tags.css">
	<script src="js/input_tags.js"></script>
	<link rel="stylesheet" href="css/zeroModal.css">
	<script src="js/zeroModal.min.js"></script>
	<script src="js/jquery.tagsinput-revisited.js"></script>
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/jquery-ui-1.11.0.css">
	<link rel="stylesheet" href="css/jquery.tagsinput-revisited.css" />
	<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
	<style>
		.page_div {
				margin-top: 20px;
				margin-bottom: 20px;
				font-size: 15px;
				font-family: "microsoft yahei";
				color: #666666;
				margin-right: 10px;
				padding-left: 20px;
				box-sizing: border-box;
			}
			/*
			 * 页数按钮样式
			 */
			
			.page_div a {
				min-width: 30px;
				height: 28px;
				border: 1px solid #dce0e0!important;
				text-align: center;
				margin: 0 4px;
				cursor: pointer;
				line-height: 28px;
				color: #666666;
				font-size: 13px;
				display: inline-block;
			}
			
			#firstPage,
			#lastPage {
				width: 50px;
				color: #0073A9;
				border: 1px solid #0073A9!important;
			}
			
			#prePage,
			#nextPage {
				width: 70px;
				color: #0073A9;
				border: 1px solid #0073A9!important;
			}
			
			.page_div .current {
				background-color: #0073A9;
				border-color: #0073A9;
				color: #FFFFFF;
			}
			
			.totalPages {
				margin: 0 10px;
			}
			
			.totalPages span,
			.totalSize span {
				color: #0073A9;
				margin: 0 5px;
			}
			.sd_pipei{
				padding-top:20px;
			}
			.sd_button{
				border:1px solid #000;
				display: inline-block;
				padding:2px 5px;
				font-size: 12px;
				border-radius: 4px;
				font-weight: bold;
				cursor: pointer;
			}
			 .table{
            margin-top:10px;
            border-collapse:collapse;
            width:1600px;
			font-size:14px;
        }
        .table td{
            border:1px solid #ccc;
            text-align: center;
            vertical-align: middle;
            font-weight: normal;
        }
        .table thead{
            background:#0073A9;
            color:#fff;
        }
        .table thead td{
            height: 40px;
            color:#fff;
        }
        .t_box{
			display:flex;
			margin-top:20px;
			align-items: center;
		  }
		  .t_box b{
			  border:1px solid #666666;
			  border-radius: 4px;
			  padding:4px 8px;
			  height:20px;
			  margin-left:15px;
			  font-weight: normal;
			  font-size: 14px;
			  cursor: pointer;
		  }
		  .tagsinput{
			  margin-left:20px;
		  }
		  .main{
			  margin:0 0!important;
		  }
		  .in-kuang{
		  	padding-left:0px!important;
		  }
		  .add_biaoq{
			  border:none;
			  border-bottom: 1px solid #ccc;
			  outline:none;
			  font-size: 14px;
			  position: relative;
			  top:2px;
			  height: 16px;
			  margin-left:36px;
			  width:150px;
		  }
		  .save_key{
			   border:1px solid #666666!important;
			  border-radius: 4px!important;
			  padding:2px 5px!important;
			  margin-left:29px!important;
			  font-size:12px!important;
			  font-weight: bold!important;
			  height:auto!important;
		  }
		  .input_texta{
			border:none;
			  border: 1px solid #ccc;
			  outline:none;
			  font-size: 14px;
			  position: relative;
			  top:2px;
			  height: 80px;
			  margin-left:16px;
			  width:260px;
		  }
		  .luru,.hulv{
			width: 6%;
    border-right: 1px solid #CCC;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    color: #000;
		  }
		  .add_biaoqian,.choise_bq{
			  position: fixed;
			  width:100%;
			  height:100%;
			  left:0;
			  top:0;
/* z-index:999;  */
			   background:rgba(0,0,0,.5); 
		  }
		  .bx_content,.cho_content{
			  position: absolute;
			  left:50%;
			  top:50%;
			  transform: translate(-50%,-50%);
			  width:440px;
			  height:160px;
			  background: #fff;
		  }
		  .input_texta{
			 
		  }
		  .tagsinput{
			  margin-right:20px;
		  }
		  .add_newbx,.add_nqx,.add_nqx,.add_nlb{
			  width:70px;
			  height: 30px;
			  color:#fff;
			  border:none;
			  position: relative;
		  }
		  .box-nav{
			  width: 1000px;
		  }
		  .cho_style{
			  width:40%;
			  height: 40px;
		  }
		  .selectBox{
				width: 400px;
				height: 36px;
				line-height: 36px;
				background: #f72323;
				margin-left:20px;
			}
			.inputCase{
				position: relative;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
			}
			.inputCase input.imitationSelect{
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border: 1px solid #ccc;
				display: block;
				text-indent: 20px;
				cursor: default;

			}
			.inputCase i.fa{
				position: absolute;
				right: 10px;
				top: 10px;
				color: #007AFF;
			}
			.selectUl{
				display: none;
				padding: 0;
				margin: 0;
				border-bottom: 1px solid #ccc;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
				position:relative;
				z-index: 99;
			}
			.selectUl li{
				height: 36px;
				line-height: 36px;
				font-size:14px;
				list-style: none;
				text-indent: 20px;
				transition: all .5s ease 0s;
				background:#fff;
				z-index: 99;

			}
			.selectUl li:hover{
				background:#0073A9;
				color:#fff;
			}
			.selectUl li:last-child{
				border-bottom: 0 none;
			}
			.arc_list tr td:nth-child(3){
				width:250px;
			}
			.arc_list tr td:nth-child(2){
				width:34px;
			}
	</style>
	</head>

	<body>
		<div class="warpper">
		<div class="choise_bq" style="display: none">
			<div class="cho_content">
				<h3  style="text-align: center;padding:15px 0">选择类别</h3>
				<div>
					<div class="selectBox">
							<div class="inputCase">
							<input class="imitationSelect" type="text" oulName="" oulId="" value="请选择" readonly />
							<i class="fa fa-caret-down"></i>
							</div>
							<ul class="selectUl">
							<!-- <li oliName="请选择" oliId="" class="">请选择</li> -->
							<!-- <li oliName="苹果" oliId="2">苹果</li>
							<li oliName="桃子" oliId="3">桃子</li> -->
							</ul>
							</div>
				</div>
				<div style="margin-top:20px;">
						<button class="add_nqx" style="background:#d9534f;margin-left:134px">取消</button>
					    <button class="add_nlb" style="background:#5cb85c">确定</button>		
				</div>
			</div>
		</div>
		<div class="add_biaoqian" style="display: none">
			<div class="bx_content">
				<h3 style="text-align: center;padding:15px 0">请选择标签</h3>
				<div>
						<input id="form-tags-5"  name="tags-4" type="text" value="" >
				</div>
				<div style="margin-top:20px;">
						<button class="add_nqx" style="background:#d9534f;margin-left:134px">取消</button>
					    <button class="add_newbx" style="background:#5cb85c">确定</button>		
				</div>
			</div>
		</div>
			<!--第二层大盒子-->
			<div class="warpper-box">
				<!--导航部分-->
				<div class="tab">
					<ul class="box-nav">
							<li class="luru" >录入</li>
							<li class="hulv">忽略</li>
						<li class="xz" style="display:none">新增</li>
						<li class="xg">修改</li>
						<li class="sc arc_sc">删除</li>
						<li class="zd arc_zd">置顶</li>
						<li class="qxzd arc_zdqx">取消置顶</li>
						<li class="tjsm arc_addm">添加免责声明</li>
						<li class="scsm arc_addmqx">删除免责声明</li>
						<li class="scsm addt_bx">添加标签</li>
						<li class="scsm addt_Nleb">添加类别</li>
						<li class="scsm hvsy">忽略所有未录入</li>
						<li class="tj arc_tj">推荐</li>
						
						<li class="qxtj arc_qxtj">取消推荐</li>
						
					</ul>
				</div>
				<div class="sd_pipei" >
					<div>
						<span style="display:none">发布时间 :</span>
						<span style="display: none"><input id="demo-3" type="text" class="text4 val_input" style="border-bottom:1px solid #ccc;width:150px"
							 /> <img src="images/date.png" style="position:relative;left:-30px" alt=""></span>
						<span class="sd_button">手动匹配</span>
					</div>
				</div>
				<div class="t_box">
					<span> ES查询json : </span>
					<textarea  type="text" value="" class="input_texta"></textarea>
					<b class="save_key" style="height:20px;"> 保存查询语句 </b>
				</div>
				<div class="shouye">
					<!--输入选择部分-->
					<input type="hidden" class="wz_id">
					<div class="in-kuang">
						
						<span class="in-wzmc">
						文章名称：<input type="text" class="wz_name arc_name" />
					</span>
						<span class="in-wzzt" style="width:100px;padding:0">
						文章状态：<select class="arc_sele"  style="width:100px;padding:0">
							<option value="0"></option>
							<option value="1">待审核</option>
							<option value="2">待发布</option>
							<option value="3">已发布</option>
							<option value="10">有更新</option>
							<option value="-1">审核失败</option>
							<option value="-2">撤销发布</option>
						</select>
					</span>
						<span class="in-ztid">
						专题: <select style="padding:0" name="" id="" class="zq_se atc_ztid">
						</select>
					</span>
					<!-- <span class="in-ztmc">
						专题名称：<input type="text" />
					</span> -->
					<!-- <span class="in-ztzt">
						专题状态：<select><option></option></select>
					</span> -->
						<span class="in-pd">
						频道：<select class="arc_pd" style="padding:0;width:100px"></select>
					</span>
						<span class="in-ss">
						<button class="arc_sou">搜索</button>
					</span>
					</div>
					<!--底部表格部分-->
					<!-- <ul class="box-big">
						<li class="li-big">选择</li>
						<li class="li-big">ID</li>
						<li class="li-big">标题</li>
						<li class="li-big">文章状态</li>
						<li class="li-big">专题ID</li>
						<li class="li-big">专题标题</li>
						<li class="li-big">专题状态</li>
						<li class="li-big">频道</li>
						<li class="li-big">类别</li>
						<li class="li-big">置顶</li>
						<li class="li-big">推荐</li>
						<li class="li-big">手动添加</li>
						<li class="li-big">免责声明</li>
						<li class="li-big">点击数</li>
						<li class="li-big">收藏数</li>
						<li class="li-big">转发数</li>
						<li class="li-big">评论数</li>
						<li class="li-big">热度</li>
						<li class="li-big">创建者</li>
						<li class="li-big">创建时间</li>
						<li class="li-big">修改时间</li>
						<li class="li-big">审核时间</li>
						<li class="li-big">发布时间</li>
						<li class="li-big">文章来源</li>
						<li class="li-big">作者</li>
						<li class="li-big">原发布时间</li>
						<li class="li-big">操作</li>
					</ul> -->
					<!-- <div class="arc_list">
						<!-- <ul class="box-big2">
							<li class="li-big2">
								<input type="checkbox" />
							</li>
							<li class="li-big2">1</li>
							<li class="li-big2">文章</li>
							<li class="li-big2">审核</li>
							<li class="li-big2">1</li>
							<li class="li-big2">专题</li>
							<li class="li-big2">待审</li>
							<li class="li-big2">专x</li>
							<li class="li-big2">文章</li>
							<li class="li-big2">专题</li>
							<li class="li-big2">专题</li>
							<li class="li-big2">文章</li>
							<li class="li-big2">有</li>
							<li class="li-big2">13</li>
							<li class="li-big2">122</li>
							<li class="li-big2">320</li>
							<li class="li-big2">120</li>
							<li class="li-big2">60</li>
							<li class="li-big2">用户</li>
							<li class="li-big2">19.4.2</li>
							<li class="li-big2">19.4.5</li>
							<li class="li-big2">19.4.6</li>
							<li class="li-big2">19.4.7</li>
							<li class="li-big2">xxx</li>
							<li class="li-big2">某..</li>
							<li class="li-big2">19.4.7</li>
							<li class="li-big2">xxx</li>
						</ul> 
					</div> -->
					<!-- 分页 -->
					<table class="table">
						<thead>
							<tr>
								<td>选择</td>
								<td> ID</td>
								<td> 标题</td>
								<td>文章状态</td>
								<td>专题ID</td>
								<td>专题标题</td>
								<td>专题状态</td>
								<td>频道</td>
								<td>类别</td>
								<td>置顶</td>
								<td>推荐</td>
								<td>手动添加</td>
								<td>免责声明</td>
								<td>点击数</td>
								<td>收藏数</td>
								<td>转发数</td>
								<td>评论数</td>
								<td>热度</td>
								<td>创建者</td>
								<td>创建时间</td>
								<td>修改时间</td>
								<td>审核时间</td>
								<td>发布时间</td>
								<td>文章来源</td>
								<td>作者</td>
								<td>原发布时间</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody class="arc_list">
					
						</tbody>
					</table>
					<div class="page_fen">
						<div value="1 0"></div>
						<div id="page" class="page_div"></div>
					</div>
					
				</div>
				<!--首页-->
				<!--新增-->

				<div class="tab-box">
					<div class="tbox-header">
						<span class="tbox-wzmc">
		            		文章名称：<input type="text" class="wz_name1" />
		            	</span>
						<span class="tbox-zd">
		            		<input type="checkbox" class="arc_top"/>置顶
		            	</span>
					</div>
						<div style="padding:5px 0;overflow: hidden;">
							<div style="float:left;font-size:14px;font-weight:bold">封面:</div>
							<div style="float:left;margin-left:37px;background:#f3f3f3;width: 160px;height: 160px;position: relative;">
							
								<input type="file" id="file" class="file" style="display:none" accept="image/png,image/jpeg,image/gif" />
								<label for="file" class="label tu">
									<img src="./img/tupian.png" class="img0">
								</label>
							</div>
						</div>
					<div class="in-tbox">
						<div class="o_box">
							<span class="ztid"><em style="position: relative;top:7px;font-style: normal;">专题：</em>
								<select style="width:180px;position: relative;top:-10px;padding:0;margin-left:42px" name="" id="" class="zq_se">
							
							</select></span>
							<span class="pd" style="display: none">频道：
								<select style="padding:0;margin-left:23px;width:151px;" name="" id="" class="arc_pindao">
							
								</select>
							</span>
						</div>
						<div class="t_box">
							
							
						</div>
						<div class="t_box">
							标签：
								<!-- <input id="form-tags-4" name="tags-4" type="text" value="" class="add_biaoq"> -->

						</div>
						<div class="s_box">
							<input type="hidden" class="bzt_id">
							<span class="ly">来源：<input type="text" class="text2 ly_text"/></span>
							<span class="wz">网址：<input type="text" class="text2 wz_text" /></span>
						</div>
						<div class="f_box">
							<span class="zze">作者：<input type="text" class="text2 zj_text"/></span>
							<span class="lb">类别：
								<!-- <input type="text" class="text2  arc_lb" /> -->
								<select name="" id="" class="seC_list" style="padding:0 36px;margin-left:26px">
									<!-- <option value="">1</option>
									<option value="">2</option>
									<option value="">3</option> -->
								</select>
							</span>
						</div>
						<div class="fi_box">
							<span class="mzsm"><input type="checkbox" class="chb mz_checkbox"/>添加免责声明</span>
							<span class="yfbsj">原发布时间：<input  id="demo-2" type="text" class="text4 fbs_text"/></span>
						</div>
						<div class="show_tHimg" style="overflow:hidden;margin-top:20px">
								<!-- <div style="float:left;background:#f3f3f3;width: 160px;height: 160px;position: relative;">
									<a  class="label " href="./img/tupian.png">
										<img src="./img/tupian.png" class="img0" >
									</a>
								</div> -->
								
						</div>
					</div>
					<div class="zw-cj">
						<div id="editor"></div>
					</div>
					<div class="tbox-footer">
						<button class="btn2 btn_title_chuang">修改</button>
						<button class="btn3">取消</button>
					</div>
				</div>
				<!--新增-->
			</div>
		</div>
	</body>


	<script src="js/fabu_wz.js"></script>
	<script>
	  var E = window.wangEditor
		var editor = new E('#editor')
		// 或者 var editor = new E( document.getElementById('editor') );
		console.log(baseNews + '/oss/upload/img');
		editor.customConfig.uploadFileName = 'file';
		  editor.customConfig.uploadImgServer = baseNews + '/oss/upload/img';
		editor.create();
	</script>
	<script src="js/foundation-datepicker.js"></script>
	<script>
		$('#demo-2').fdatepicker({
				format: 'yyyy-mm-dd hh:ii',
				pickTime: true
			});
			$('#demo-3').fdatepicker({
					format: 'yyyy-mm-dd hh:ii',
					pickTime: true
				});
				// $('#form-tags-5').tagsInput({
				// 'autocomplete': {
				// 	source: ["123"]
				// }
			//});
			$(function(){
				// $(".selectBox .imitationSelect").on("click",function(){
				// 	$(this).parent().next().toggle();//ul弹窗展开
				// 	$(this).next().toggleClass("fa-caret-up")//点击input选择适合，小图标动态切换
				// 	if (event.stopPropagation) {   
			    //     	// 针对 Mozilla 和 Opera   
			    //     	event.stopPropagation();   
			    //     }else if (window.event) {   
			    //     	// 针对 IE   
			    //     	window.event.cancelBubble = true;   
			    //     }   /*阻止事件传播，事件从点击的元素出发，向外（window）传播，
				// 		如果不写个阻止事件，会导致下面的document点击函数一起执行，导致显示失败*/
						
				// });
				// $(".selectUl li").click(function(event){
				// 	$(this).addClass("actived_li").siblings().removeClass("actived_li");//点击当前的添加。actived_li这个类；其他的移除这个类名
				// 	var oliName = $(this).attr("oliName");//定义一个name属性，获取点击的元素属性赋值到当前，方便动态化传值
				// 	var oliId = $(this).attr("oliId");//定义一个id属性，获取点击的元素属性赋值到当前，方便动态化传值
				// 	$(this).parent().prev().children().val(oliName); //把当前点击的name赋值到显示的input的val里面
				// 	$(this).parent().prev().children().attr("oliName",oliName);//把当前点击的oliName赋值到显示的input的oliName里面
				// 	$(this).parent().prev().children().attr("oliId",oliId);//把当前点击的oliId赋值到显示的input的oliId里面
				// });
				// $(document).click(function(event){
				// 	$(".inputCase .fa").removeClass("fa-caret-up").addClass("fa-caret-down")//当点隐藏ul弹窗时候，把小图标恢复原状
				// 	$(".selectUl").hide();//当点击空白处，隐藏ul弹窗
				// });
				
			})

	</script>
</html>